import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '@/views/login/index'
import Layout from '@/views/layout/index'
import { Message } from 'element-ui'

// 后台
import SysSku from '@/views/sys/sys-sku'
import SysOrder from '@/views/sys/sys-order'

// 在 VueCli 中创建的项目中 @ 代表的是 src目录下，且不受当前文件路径影响
Vue.use(VueRouter)

// 路由配置表
const routes = [
  {
    path: '/login',
    name: 'login',    //定义路由的name可以使用编程式导航(比如router.push)来切换路由
    component: Login
  },
  {
    //首页总布局路由
    path: '/sys',
    //如果路由有一个默认子路由，则这个路由的name没有意义
    // name: 'layout',
    component: Layout,
    redirect: '/sys-order',
    children: [
      {
        path: '/sys-sku',
        name: 'sys-sku',
        component: SysSku
      },
      {
        path: '/sys-order',
        name: 'sys-order',
        component: SysOrder
      }
    ]
  }

]

const router = new VueRouter({
  routes
})

// 配置路由导航守卫
// 所有页面导航的路由都会经过这里
router.beforeEach((to, from, next) => {
  if(to.path === '/login') {
    // 跳转到登录页面，就放行
    next();
  } else {
    const token = sessionStorage.getItem('token')
    if(token) {
      // 用户已存在，放行
      next()
    } else {
      // 没有登录，就跳转到登录页面
      Message({
          message: ' 请先登录',
          type: 'error',
          duration: 2 * 1000
      })
      next('/login');
    }
  }
})

export default router
